<template>
	<div class="caseContainer">
		<ul class="caseBox">
			<li class="itemBox" v-for="item in cases">
				<div>
					<img class="image" :src="item.src" alt="">
				</div>
				<p class="itemTitle">{{item.name}}</p>
			</li>
		</ul>
		<!-- <div class="searchMore">
			<span>
				查看更多>>
			</span>
		</div> -->
	</div>
</template>

<script>
	export default({
		data() {
			return {
				cases:[
					{
						src: require("../assets/top1.png"),
						name: "上影国际影城"
					},
					{
						src: require("../assets/top2.png"),
						name: "幸福蓝海影城"
					},
					{
						src: require("../assets/1.png"),
						name: "深圳南山华纳万都影城"
					},
					{
						src: require("../assets/2.png"),
						name: "快鱼连锁服饰"
					},
					{
						src: require("../assets/3.png"),
						name: "CK Jeans专卖店"
					},
					{
						src: require("../assets/4.png"),
						name: "科技展厅"
					},
					{
						src: require("../assets/5.png"),
						name: "音乐餐吧"
					},
					{
						src: require("../assets/6.png"),
						name: "钟表专卖店"
					},
					{
						src: require("../assets/7.png"),
						name: "商场"
					},
					{
						src: require("../assets/8.png"),
						name: "bossin服饰"
					},
					{
						src: require("../assets/9.png"),
						name: "商场"
					}
				]
			}
		}
	})
</script>

<style scoped>
	.caseContainer {
		width:100%;
	}
	.caseBox {
		width: 1020px;
		margin: 0 auto;
		overflow: hidden;
	}
	.image {
		display: block;
		transform: scale(1);
		transition: 0.8s;
	}
	.image:hover {
		transform: scale(1.2);
		transition: 0.8s;
	}
	.itemBox>div{
		/* width: 320px;
		height: 220px; */
		overflow: hidden;
	}
	.itemBox {
		width: 320px;
		height: 270px;
		list-style: none;
		float: left;
		margin-right: 20px;
	}
	.itemTitle {
		font-size:18px;
		color:#464646;
		padding: 10px 10px 5px;
		background:rgb(240,244,248);
		text-align: center;
	}
	.searchMore {
		text-align: center;
		height: 50px;
	}
	.searchMore>span {
		width: 160px;
		height: 26px;
		display: inline-block;
		border: 1px solid #328ecd;
		color:#328ecd;
		border-radius: 4px;
		font-size: 16px;
		padding-top: 6px;
		cursor: pointer;
	}
	.itemBox:first-child {
		width: 660px;
		height: 450px;
	}
	.itemBox:nth-child(2) {
		width: 320px;
		height: 450px;
	}
</style>